<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1500px"
    top="3vh"
    @close="close"
  >
    <el-col :span="24">
      <vab-query-form>
        <vab-query-form-left-panel
          v-if="CustomerInfo.CustomerID !== 0"
          :span="10"
        >
          <div style="float: left; font-size: 24px">
            {{ CustomerInfo.CustomerAllName }}
          </div>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel
          v-if="CustomerInfo.CustomerID !== 0"
          :span="2"
        >
          <div style="float: right; font-size: 14px">
            ID：{{ CustomerInfo.CustomerID }}
          </div>
        </vab-query-form-right-panel>
      </vab-query-form>
      <div>
        <el-descriptions
          class="margin-top"
          title="客户基本信息"
          :column="4"
          :size="size"
          border
        >
          <template #extra>
            <el-button type="primary">查看更多信息</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">客户全称</div>
            </template>
            {{ CustomerInfo.CustomerAllName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">所属区域</div>
            </template>
            {{ CustomerInfo.City }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">所属行业</div>
            </template>
            {{ CustomerInfo.Industry }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">电话</div>
            </template>
            {{ CustomerInfo.Telphone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">法定代表人</div>
            </template>
            {{ CustomerInfo.LegalPerson }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">负责人电话</div>
            </template>
            {{ CustomerInfo.LegalMobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">业务联系人</div>
            </template>
            {{ CustomerInfo.BusinessPerson }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">业务联系人电话</div>
            </template>
            {{ CustomerInfo.BusinessPersonMobile }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">主营产品</div>
            </template>
            {{ CustomerInfo.SalesProducts }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">主要销售区域</div>
            </template>
            {{ CustomerInfo.SalesArea }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">主要客户群体</div>
            </template>
            {{ CustomerInfo.CustomerGroup }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <div class="cell-item">地址</div>
            </template>
            {{ CustomerInfo.Address }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div style="padding: 20px">
        <el-row>
          <el-col style="text-align: center" :span="8">
            <el-statistic
              title="BusinessOrderCount"
              :value="CustomerCount.BusinessOrderCount"
            />
          </el-col>
          <el-col style="text-align: center" :span="8">
            <el-statistic
              title="CustomerPickCount"
              :value="CustomerCount.CustomerPickCount"
            />
          </el-col>
          <el-col style="text-align: center" :span="8">
            <el-statistic
              title="OrderListCount"
              :value="CustomerCount.OrderListCount"
            />
          </el-col>
        </el-row>
      </div>
      <div style="padding-bottom: 20px">
        <el-button type="primary">相关销售人员</el-button>
        <el-button type="primary">名下商机</el-button>
        <el-button type="primary">跟进小记</el-button>
        <el-button type="primary">相关服务人员</el-button>
        <el-button type="primary">服务小记</el-button>
        <el-button type="primary">客满小记</el-button>
      </div>
      <el-divider>名下业务合同</el-divider>
      <el-table
        :data="BusinessOrders"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        default-expand-all
      >
        <el-table-column prop="OrderID" label="ID" width="90" />
        <el-table-column prop="BusinessOrderName" label="商机业务类" />
        <el-table-column prop="OrderCode" label="合同编号" />
        <el-table-column prop="SignOrderDate" label="签约日期" />
        <el-table-column prop="OrderType" label="合同属性" />
        <el-table-column prop="OrderTotalMoney" label="合同金额" />
        <el-table-column prop="ReserveMoney" label="备付金金额" />
        <el-table-column prop="OrderMemo" label="备注" />
      </el-table>
      <div style="height: 50px"></div>
      <el-divider>名下业务产品</el-divider>
      <el-table
        v-loading="listLoading"
        :data="OrderList"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          label="ID"
          prop="OrderListID"
          show-overflow-tooltip
          width="60"
        />
        <el-table-column
          align="center"
          label="产品名称"
          prop="ProductName"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="产品价格"
          prop="ProductPrice"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="产品数量"
          prop="ProductNum"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="产品签约金额"
          prop="ProductMoney"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="成本金额"
          prop="ProductCost"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="计划服务期限"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            {{ row.PlanServiceStartDate }} 至 {{ row.PlanServiceEndDate }}
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 50px"></div>
      <el-divider>名下相关账号</el-divider>
      <el-table
        v-loading="listLoading"
        :data="StoreList"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          label="店铺或账号ID"
          prop="StoreID"
          show-overflow-tooltip
          width="120"
        />
        <el-table-column
          align="center"
          prop="ProductName"
          label="服务产品或赠品"
        />
        <el-table-column align="center" prop="StoreAccount" label="服务对象" />
        <el-table-column align="center" label="是否工厂店" width="130">
          <template #default="{ row }">
            <span v-if="row.isFactory == 0">否</span>
            <span v-if="row.isFactory == 1">是</span>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="实际服务期限" width="250">
          <template #default="{ row }">
            <el-button type="primary" text size="small">
              {{ row.ServiceStartDate }} 至 {{ row.ServiceEndDate }}
            </el-button>
          </template>
        </el-table-column> -->
        <el-table-column align="center" label="链接" width="70">
          <template #default="{ row }">
            <div v-if="row.StoreUrl">
              <a :href="row.StoreUrl" target="_blank">链接</a>
            </div>
            <div v-else>--</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template #default="{ row }">
            <el-button
              v-if="row.isLock"
              type="success"
              size="small"
              @click="handleEdit(row)"
            >
              查看账密
            </el-button>
            <el-button
              v-else
              type="danger"
              size="small"
              @click="handleEdit(row)"
            >
              查看账密
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <domain ref="domainRef" @fetch-data="EmitData" />
    <host ref="hostRef" @fetch-data="EmitData" />
    <server ref="serverRef" @fetch-data="EmitData" />
    <email ref="emailRef" @fetch-data="EmitData" />
    <website ref="websiteRef" @fetch-data="EmitData" />
    <StoreLink ref="storeLinkRef" @fetch-data="EmitData" />
  </el-dialog>
</template>

<script>
  import { AllInfo } from '@/api/common'
  import Domain from '@/views/business/components/Domain'
  import Host from '@/views/business/components/Host'
  import Server from '@/views/business/components/Server'
  import Email from '@/views/business/components/Email'
  import { showPassword } from '@/api/businessOrder'

  import Website from '@/views/business/components/Website'
  import StoreLink from '@/views/business/components/StoreLink'
  export default defineComponent({
    name: 'CustomerAllInfo',
    components: {
      StoreLink,
      Domain,
      Host,
      Server,
      Email,
      Website,
    },
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        storeLinkRef: null,
        websiteRef: null,
        emailRef: null,
        hostRef: null,
        serverRef: null,
        domainRef: null,
        BusinessOrders: [],
        CustomerCount: {},
        CustomerPicks: [],
        CustomerInfo: {},
        formRef: null,
        queryForm: {},
        OrderList: [],
        StoreList: [],
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
      })

      const showEdit = (row) => {
        console.log(row, 'row')

        state.queryForm = Object.assign({}, row)
        getInfo(row)
        state.dialogFormVisible = true
      }
      const close = () => {
        state.queryForm = {}
        state.dialogFormVisible = false
      }
      const getInfo = async (row) => {
        let CustomerPickID
        if (row.CustomerPickID) {
          CustomerPickID = row.CustomerPickID
        } else {
          CustomerPickID = 0
        }
        const dataMsg = {
          CustomerID: row.CustomerID,
          CustomerPickID: CustomerPickID,
        }
        const {
          data: {
            BusinessOrders,
            CustomerCount,
            CustomerInfo,
            CustomerPicks,
            OrderList,
            StoreList,
          },
        } = await AllInfo(dataMsg)
        state.BusinessOrders = BusinessOrders
        state.CustomerCount = CustomerCount
        state.CustomerInfo = CustomerInfo
        state.CustomerPicks = CustomerPicks
        state.OrderList = OrderList
        state.StoreList = StoreList
      }
      const save = async () => {
        const { msg } = await doTrusteeship(state.form)
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        emit('fetch-data')
        close()
      }

      const handleEdit = async (row) => {
        console.log('shopLinkForm', row)
        const businessClass = row.BusinessClassID
        // state.BusinessClassID = row.BusinessClassID
        switch (businessClass) {
          case 1:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, false, true)
            }
            break
          case 2:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, false, true)
            }
            break
          case 3:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, false, true)
            }
            break
          case 4:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, true, true)
            }
            break
          case 5:
            if (row.ProductID == 63) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.domainRef.showEdit(row, true, true)
                }
              } else {
                state.domainRef.showEdit(row, true, true)
              }
            } else if (row.ProductID == 64) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.hostRef.showEdit(row, true, true)
                }
              } else {
                state.hostRef.showEdit(row, true, true)
              }
            } else if (row.ProductID == 65) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.serverRef.showEdit(row, true, true)
                }
              } else {
                state.serverRef.showEdit(row, true, true)
              }
            } else if (row.ProductID == 67) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.emailRef.showEdit(row, true, true)
                }
              } else {
                state.emailRef.showEdit(row, true, true)
              }
            } else if (
              row.ProductID == 68 ||
              row.ProductID == 69 ||
              row.ProductID == 70 ||
              row.ProductID == 107 ||
              row.ProductID == 108
            ) {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.websiteRef.showEdit(row, true, true)
                }
              } else {
                state.websiteRef.showEdit(row, true, true)
              }
            } else {
              if (row.BindID != 0 && row.isLock) {
                if (await open(row)) {
                  state.storeLinkRef.showEdit(row, true, true)
                }
              } else {
                state.storeLinkRef.showEdit(row, true, true)
              }
            }
            break
          default:
            if (row.BindID != 0 && row.isLock) {
              if (await open(row)) {
                state.storeLinkRef.showEdit(row, true, true)
              }
            } else {
              state.storeLinkRef.showEdit(row, false, true)
            }
        }
        // 域名的63
        // state.domainRef.showEdit(row)
        // 主机的64
        // state.hostRef.showEdit(row)
        // 邮箱的67
        // state.emailRef.showEdit(row)
        // 网站 68,69,70,107.108
        // state.websiteRef.showEdit(row)
      }

      const open = async (row) => {
        let flag
        await ElMessageBox.prompt('请输入密码', '', {
          confirmButtonText: '确认',
          cancelButtonText: '关闭',
        })
          .then(async ({ value }) => {
            const dataMsg = {
              StoreID: row.StoreID,
              ShowPassword: value,
            }
            const { data } = await showPassword(dataMsg)
            console.log(data, typeof data)

            if (data) {
              flag = true
            } else {
              flag = false
              ElMessage({
                type: 'warning',
                message: `密码输入错误`,
              })
            }
          })
          .catch(() => {
            flag = false
          })
        return flag
      }

      return {
        ...toRefs(state),
        showEdit,
        getInfo,
        handleEdit,
        open,
        close,
        save,
      }
    },
  })
</script>
